<!--
@description: 网格布局
@author: ldb
@time: 2022-09-10 22:26:12
-->
<template>
  <div class="grid">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
    <div><p>4</p></div>
    <div><p>5</p></div>
    <div><p>6</p></div>
    <div><p>7</p></div>
    <div><p>8</p></div>
    <div><p>9</p></div>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss">
.grid {
  width: 100%;
  height: 100%;
  // 声明块级网格布局
  display: grid;
  // 声明行内网格布局
  //display: inline-grid;
  // 宽高指定(三行，每行100高，三列，每列100宽)
  //grid-template-columns: 100px 100px 100px;
  //grid-template-rows: 100px 100px 100px;
  // 百分比
  //grid-template-columns: 33.3% 33.3% 33.3%;
  //grid-template-rows: 33.3% 33.3% 33.3%;
  // repeat函数
  //grid-template-rows: repeat(3, 33.3%);
  //grid-template-columns: repeat(3, 33.3%);
  // 重复某种模式
  //grid-template-columns: repeat(2, 100px 200px 300px);
  //  当单元格大小固定，容器大小不确定，需要尽可能填充多时
  //grid-template-columns: repeat(auto-fill, 25%);
  // 比例关系
  //grid-template-columns: 150px 1fr 2fr;
  // 大小范围(最小最大)
  //grid-template-columns: 1fr 1fr minmax(100px, 1fr);
  // 放养
  //grid-template-columns: 100px auto 100px;
  // 网格线名称(指定名称方便引用)
  //grid-template-columns: [c1] 100px [c2] 200px [c3] 300px [c4];
  //grid-template-rows: [r1] 100px [r2] 200px [r3] 300px [r4];
  // 两栏式布局
  //grid-template-columns: 30% 70%;
  //grid-template-columns: repeat(12, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-template-row: repeat(3, 1fr);
  // 间距设置
  //grid-column-gap: 20px;
  //grid-row-gap: 40px;
  //grid-gap: 20px 20px;
  //gap: 20px;
  // 区域
  //grid-template-areas:
  //  'a b c'
  //  'd e f'
  //  'g h i';
  //grid-template-areas:
  //  'a a a'
  //  'b b b'
  //  'c c c';
  //grid-template-areas:
  //  'header herader herader'
  //  'slider main main'
  //  '. . .';
  /*
  上面代码中，中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域。
  注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。
  比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。
  **/
  // 网格流布局（默认为行）
  //grid-auto-flow: row;
  // 行密布
  //grid-auto-flow: row dense;
  // 列密布
  //grid-auto-flow: column dense;
  // 布局
  // 水平布局 start | end | center | stretch | space-around | space-between | space-evenly;
  //justify-content: center;
  // 垂直布局
  //align-items: center;
  // 布局简写
  //place-content: center center;
  // 自动规则 (自动新增的行高 列宽)
  //grid-auto-rows: 50px;
  //grid-auto-columns: 50px;
  /**
  grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

从易读易写的角度考虑，还是建议不要合并属性，所以这里就不详细介绍这两个属性了。
   */
  // 项目位置指定
  //grid-column-start属性：左边框所在的垂直网格线
  //grid-column-end属性：右边框所在的垂直网格线
  //grid-row-start属性：上边框所在的水平网格线
  //grid-row-end属性：下边框所在的水平网格线
  .item-1 {
    grid-column-start: 2;
    grid-column-end: span 2;
    grid-area: 1 / 1 2 / 2;
  }
  // 单元格内容
  /**
   justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
   */
  /*
      grid-column: <start-line> / <end-line>;
    grid-row: <start-line> / <end-line>;
  */
}

div {
  background: rgba(0, 143, 255, 0.22);
  border: 2px solid white;
}
</style>
